<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    type="flex"
    router
    :class="{ headerfixed: topfixed }"
    id="headerTop"
  >
    <el-menu-item class="logo">
      <div class="logo-title">
        <nuxt-link to="/">我是大吉</nuxt-link> 
        <span class="logo-slogan">一个不务正业的程序猿</span>
      </div>
    </el-menu-item>
    <el-menu-item index="/" class="nav-title hidden-sm-and-down">首页</el-menu-item>
    <template v-for="(item) of nav">
    <el-menu-item :index="'/lists/'+item.id.toString()" class="nav-title hidden-sm-and-down" :key="item.id" v-if="!item.children">{{item.name}}</el-menu-item>
    </template>
    <template v-for="item of nav">
    <el-submenu :index="item.id.toString()" class="nav-title hidden-sm-and-down" :key="item.id" v-if="item.children">
      <template slot="title" class="nav-title">{{item.name}}</template>
      <el-menu-item :index="'/lists/'+itemchid.id.toString()" v-for="itemchid of item.children" :key="itemchid.id">{{itemchid.name}}</el-menu-item>
    </el-submenu>
    </template>
  </el-menu>
</template>

<script>
import axios from 'axios'

export default {
  name: "NavMenu",
  data() {
    return {
      activeIndex: "/",
      nav:[],
      topfixed:false
    };
  },
  created(){
    this.getNavInfo()
  },
  mounted(){
　　window.addEventListener('scroll',this.handleScroll) // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
  },
  methods: {
    getNavInfo(){
     axios.get('http://admin.isdaji.cn/api/portal/categories').then((res)=>{
       res = res.data
      if(res.code ==1 && res.data){
        this.nav = res.data
      }
     })
    },
    handleScroll(){
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量
      let offsetTop = document.querySelector('#headerTop').offsetHeight; // header高度
      scrollTop>offsetTop ? this.topfixed = true : this.topfixed = false;
    }
  }
};
</script>
<style lang="less" scoped>
.headerfixed{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
}
.logo {
  margin-right: 1.875rem ;
  .logo-title {
    font-size: 1.4rem;
    color:#3498db;
    .logo-slogan {
      font-size: 0.6rem;
      color: #bdc3c7;
      display: inline-block;
      padding-left: 0.3rem;
    }
  }
}
.nav-title{
  font-size: 0.87rem;
}
</style>
